<template>
    <div class="container-fluid">
        <TopBar></TopBar>
        <div class="box">
            <!-- 标题 -->
            <div class="title-box">
                <div v-if="saveToast">
                    <p class="save-toast" @click="goArticleSaved" type="button">
                        {{ $t('editorPage.checkMsg') }}
                    </p>
                </div>

                <div class="d-grid gap-2 col-6 mx-auto">

                    <div class="input-group mb-3 input-group-sm">
                        <input type="text" class="form-control" v-model="articelStore.articleEdit.title"
                            :placeholder="$t('editorPage.inputTitle')" 
                            aria-describedby="inputGroup-sizing-default">
                    </div>
                </div>

            </div>
            <!-- 标签 -->
            <div class="label-box">
                <p> {{ $t('editorPage.inputTags') }}</p>
                <button class="btn btn-light btn-sm" @click="() => { articelStore.articleEdit.tags = '网络安全' }"
                    type="button">{{ $t('editorPage.security') }}</button>
                <button class="btn btn-light btn-sm" @click="() => { articelStore.articleEdit.tags = '前端' }"
                    type="button">{{ $t('editorPage.fontWeb') }}</button>
                <button class="btn btn-light btn-sm" @click="() => { articelStore.articleEdit.tags = '后端' }"
                    type="button">{{ $t('editorPage.backWeb') }}</button>
                <button class="btn btn-light btn-sm" @click="() => { articelStore.articleEdit.tags = '单片机' }"
                    type="button">{{ $t('editorPage.microprocessor') }}</button>
                <input class="form-control form-control-sm" v-model="articelStore.articleEdit.tags" type="text"
                    :placeholder="$t('editorPage.custom')" >
            </div>
            <!-- 类型 -->
            <div class="label-box">
                <p>{{ $t('editorPage.inputType') }}</p>
                <button 
                class="btn btn-primary btn-sm" 
                :class="{ active: articelStore.articleEdit.type === '问题' }"
                @click="() => { articelStore.articleEdit.type = '问题' }"
                    type="button">{{ $t('editorPage.QS') }}</button>
                <button class="btn btn-success btn-sm" 
                :class="{ active: articelStore.articleEdit.type === '文章' }"
                
                @click="() => { articelStore.articleEdit.type = '文章' }"
                    type="button">{{ $t('editorPage.article') }}</button>
            </div>
            <!-- 编辑框 -->
            <div class="edit-box">
                <EditorBox @saveArticle="saveArticle"></EditorBox>
            </div>


            <!-- 操作按钮 -->
            <div>
                <br><br>
                <div class="label-box">
                    <button class="btn btn-primary btn-sm" type="button" @click="pullArticle()">
                        <img src="../assets/icons/send.svg" alt="return">{{ $t('editorPage.submit') }}</button>
                    <button class="btn btn-danger btn-sm" type="button" @click="clearArticle()">
                        <img src="../assets/icons/del-w.svg" alt="return">{{ $t('editorPage.clearBody') }}</button>

                    <button class="btn btn-success btn-sm" type="button" @click="img_input_show = !img_input_show">

                        <img src="../assets/icons/upload.svg" alt="return">{{ $t('editorPage.bgImg') }}</button>
                    <input v-show="img_input_show" style="width:300px;height:30px" @change="uploadFile()" ref="bgimageREF"
                        class="form-control form-control-sm" type="file">
                </div>
               
            </div>
            
        </div>
        <br>
        <br><br>
        <br><br>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from "vue"
import { uploadFILE } from '../api/file/index'
// 传参是router, 引入useRouter
// 接收参数是route, 引入useRoute
import { useRouter, useRoute } from 'vue-router'
import toast from "@/components/Toast/index"
import { ArticleStore } from '../store/articelStore/index'
const router = useRouter()
const articelStore = ArticleStore()
const editType = ref()
const route = useRoute()
const bgimageREF:any = ref(null)
const saveToast = ref(false)

var img_input_show = ref(false);

//将上次保存的文章展现
function goArticleSaved() {
    articelStore.articleEdit = articelStore.articleSave;
    saveToast.value = false;
}
//文章保存检测
function checkSaveArticle() {
    if (editType.value === "pullArticle") {
        if (articelStore.articleSave.body !== ""
            || articelStore.articleSave.cover_image !== ""
            || articelStore.articleSave.tags !== ""
            || articelStore.articleSave.type !== ""
            || articelStore.articleSave.title !== "") {
            saveToast.value = true;
        }
    }
    return

}
//文件上传
async function uploadFile() {
    try {
        if (bgimageREF.value !== null) {
            const files: File[] = bgimageREF.value.files;
            if (files[0].size > 10 * 1024 * 1024) {
                console.log("文件超过10Mb");
                bgimageREF.value.value = null;
                return;
            }
            const res: any = await uploadFILE({ file: files[0] });
            console.log(res.data);
            articelStore.articleEdit.cover_image = res.data.data;
            pullArticle()
        }
    } catch (error) {
        // 处理错误
        console.error(error);
        // 根据需要返回或执行其他操作
    }
}

//文章上传
async function pullArticle() {
    console.log("23456789")
    console.log(articelStore.articleEdit.cover_image)
    if( articelStore.articleEdit.cover_image === "" 
    || articelStore.articleEdit.cover_image === undefined
    || articelStore.articleEdit.cover_image === null
    ){
        articelStore.articleEdit.cover_image = "noChange"
    }
    //修改文章
    if (editType.value === "editArticle") {
        console.log(articelStore.articleEdit)
        await articelStore.editArticle()
        return
    }

    //上传文章
    if (editType.value === "pullArticle") {
        console.log(articelStore.articleEdit)
        await articelStore.pullArticle()
        router.push({ path: 'biography' })

        return
    }
}

//文件保存
function saveArticle() {
    articelStore.articleSave = articelStore.articleEdit;
    toast.showToast({ msg: "保存成功", type: "success" })
    console.log(articelStore.articleSave)
}


//清空文章内容
function clearArticle() {
    articelStore.articleEdit.body = "";
}
//监控获取文章内容
watch(() => articelStore.article_now, () => {
    //获取编辑的原文信息
    articelStore.articleEdit = articelStore.article_now

})

function getData(){
    try {
        //接受参数判断应该使用哪个api
        editType.value = route.query.editType
        if (editType.value === "pullArticle") {
            //保存文章检测
            checkSaveArticle()
            //恢复默认状态
            articelStore.articleEdit = {
                article_id: "",
                title: "",
                tags: "",
                type: "",
                body: "",
                cover_image: ""
            }
            //必须停止
            return
        }
        // 修改文章，获取原文
        articelStore.getArticleBody(route.query.article_id as string)
        
    } catch (error) {
        console.log("错误")
    }
}
getData();
onMounted(() => {

})

</script>
<style lang="scss" scoped>
.container-fluid {
    background-color: $passlink-bg-color;

    .box {
        width: $passlink-center-width;
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;

        .save-toast {
            color: $passlink-font-color-waring;
            font-size: $passlink-font-size14;
            text-decoration: underline;
            width: 400px;
        }

        .save-toast:hover {
            color: $passlink-font-color-yellow;

            text-decoration: none;
        }

        .title-box {
            padding: 20px;
            width: 100%;


        }

        .label-box {
            margin-top: 10px;
            display: flex;
            width: 100%;
            color: $passlink-font-color-white;
            .btn.active {
                background-color: yellow;
                color: black;
              }
            p {
                font-size: $passlink-font-size16;
                font-weight: lighter;
            }

            button {
                margin-left: 20px;
                width: auto;
                height: 30px;
            }

            input {
                margin-left: 20px;
                width: 100px;
                height: 30px;
            }

            img {
                margin: auto;
                width: 16px;
                height: 16px;
            }

            button:hover {
                color: $passlink-font-color-black;
                background-color: $passlink-font-color-yellow;
            }
        }

        .edit-box {
            height: 710px;
            border: 2px solid $passlink-font-color-white;
        }
    }



}
</style>
